<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="TypeListModalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">

        <div class="modal-title">
          <p>警车类型信息管理</p>
        </div>

        <div class="modal-ctrl-content">

          <div class="even-row">
            <div class="table-ctrl-body">

              <div class="Btns-ctrl-body">
                <div class="search-ctrl f-l" >
                  <form style="height: 100%;">
                    <input placeholder="根据车类型名称" @keyup="defaultLoad($event)" v-model="searchResourceText" class="search-text">
                    <button class="search-btn btn btn-info" type="button" @click="searchResource">搜索</button>
                  </form>
                </div>
                <div class="btns f-r">
                  <button type="button" class="btn btn-info" @click="addCarType('add')">新增</button>
                  <button type="button" class="btn btn-warning" @click="addCarType('upData')">修改</button>
                  <button type="button" class="btn btn-danger" @click="deleteRowFn">删除</button>
                  <div class="vehicleType" v-show="vehicleTypeAddObj.isShow">
                    <p>警车类型名：</p>
                    <input maxlength="16" placeholder="最长16个字符"
                           onkeyup="this.value=this.value.replace(/\s+/g,'')"
                           v-model="vehicleTypeAddObj.name" type="text">
                    <button type="button" class="btn btn-default" @click="closeCarTypeFn">取消</button>
                    <button type="button" class="btn btn-info" @click="subCarTypeFn">确定</button>
                  </div>
                </div>
              </div>

              <div class="table-ctrl">
                <!--表格头-->
                <!--{{treeTableRow}}-->
                <div class="table-header">
                  <table class="table-default">
                    <thead>
                    <tr>
                      <th v-for="trs in tableHeader">
                        {{trs.value}}
                      </th>
                    </tr>
                    </thead>
                  </table>
                </div>
                <!--表格中部-->
                <div class="table-overflowX" style="height: 300px;">
                  <table class="table-default">
                    <tbody>
                    <tr
                      v-for="(trs,index) in tableRow"
                      @click="selectRowFn(trs,index)"
                      :class="{active: index === isActive}"
                    >
                      <td v-for="tds in tableHeader">
                         {{ trs[tds.key] }}
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>

            </div>
          </div>

        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-info" @click="close">关闭</button>
        </div>
        <!--{{userDetailsModal.obj}}-->
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        name: "VehicleTypeTableModal",
        props:["TypeListModalObj"],
        data(){
          return{
            isActive:"",
            tableHeader:[
              {"key":"TYPE","value":"车辆类型"}
            ],
            tableRow:[],
            searchResourceText:"",
            tableRowParams: {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "policefacility", //数据库选择
              "pageIndex": 1, //分页
              "pageSize": -1, //分页条目 -1查所有
              "tableName": "T_CAR_TYPE" //表名称
            },
            vehicleTypeAddObj:{
              id:"",
              name:"",
              isShow:false
            }
          }
        },
        watch:{
          TypeListModalObj:{
            handler(v1){
              if(v1.isShow){
                this.getCarTypeListAjax();
              }
            },
            deep:true
          },
        /*  vehicleTypeAddObj:{
            handler(v1){
              //console.log(v1);
              if( v1.isShow ){
                if( v1.id !== "" ){ //修改
                  //加载警车类型信息
                  //console.log('1');
                  //this.getCarTypeData()
                }else{ //新增

                }
              }
            },
            deep:true
          }*/
        },
        methods:{
          //加载车类型列表
          getCarTypeListAjax(){
            this.$axios.post(this.HOST+"/base/query/page",this.tableRowParams)
              .then((data)=>{
                //console.log(data);
                this.tableRow = data.data.data.list;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //新增警车类型弹窗
          addCarType(type){
            if( type === "add" ){ //新增
              this.vehicleTypeAddObj.id = "";
              this.vehicleTypeAddObj.name = "";
              this.isActive = "";
            }else if( type === "upData" ){ //修改
              if( this.vehicleTypeAddObj.id === "" ){
                this.s_alert("请选择需要修改的车辆类型!");
                return false;
              }
            }
            this.vehicleTypeAddObj.isShow = !this.vehicleTypeAddObj.isShow;
          },
          //获取警车类型信息
          getCarTypeData(){
            if( this.vehicleTypeAddObj.id ){
              let params =  {
                "columns": ["*"],
                "conditions": [
                  {
                    "field": "ID",
                    "symbol": "=",
                    "value": this.vehicleTypeAddObj.id
                  }
                ],
                "dataTypeCode": "policefacility",
                "tableName": "T_CAR_TYPE"
              };
              //POST /base/query/page
              this.$axios.post(this.HOST+"/base/query/page",params)
                .then((data)=>{
                  //console.log(data);
                  this.vehicleTypeAddObj.name = data.data.data.list[0].TYPE
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }else{
              this.s_alert("请选择需要查看的车辆类型")
            }


          },
          //关键字搜索
          searchResource(){
            let searchParams = [ //查询条件
              {
                "field": "TYPE",
                "symbol": "like",
                "value": ""
              }
            ];
            if( this.searchResourceText ){
              searchParams[0].value = "%"+this.searchResourceText+"%";
              //console.log(searchParams);
            }else{
              searchParams = []
            }
            //搜去条件添加到组件全局
            this.tableRowParams.conditions = searchParams;
            //重新加载
            this.getCarTypeListAjax();
            //清楚选择缓存
            this.clearFn();
          },
          //选择行
          selectRowFn(obj,index){
            //console.log(obj);
            this.vehicleTypeAddObj.id = obj.ID;
            this.vehicleTypeAddObj.name = obj.TYPE;
            this.isActive = index;
          },
          closeCarTypeFn(){
            this.vehicleTypeAddObj.isShow = !this.vehicleTypeAddObj.isShow;
            this.vehicleTypeAddObj.name = "";
            this.vehicleTypeAddObj.id = "";
            this.isActive = "";
          },
          //新增与修改警车类型
          subCarTypeFn(){

            if( this.verifyForm.isNull(this.vehicleTypeAddObj.name) ){
              this.s_alert("车辆类型名称不能为空！");
              return false;
            }

            if( this.vehicleTypeAddObj.id ){ //修改
              let params = {
                "conditions": [
                  {
                    "field": "ID",
                    "symbol": "=",
                    "value": this.vehicleTypeAddObj.id
                  }
                ],
                "dataTypeCode": "policefacility",
                "data": {TYPE:this.vehicleTypeAddObj.name},
                "tableName": "T_CAR_TYPE"
              };
              //console.log(params);
              this.$axios.put(this.HOST+"/base/modify",params)
                .then((data)=>{
                  //console.log(data);
                  if( data.data.success ){
                    this.s_alert("修改成功！");
                    this.s_logwrite("资源信息管理-警车管理","修改警车类型");
                    this.closeTypeCtrl();
                    this.getCarTypeListAjax();
                  }else{
                    this.s_alert("修改失败！")
                  }
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }else{ //新增
              let params = {
                "columns": ["TYPE"],
                "dataTypeCode": "policefacility",
                "datas": [this.vehicleTypeAddObj.name],
                "tableName": "T_CAR_TYPE"
              };
              //console.log(params);
              this.$axios.post(this.HOST+"/base/save",params)
                .then((data)=>{
                  //console.log(data);
                  if( data.data.success ){
                    this.s_alert("新增成功！");
                    this.s_logwrite("资源信息管理-警车管理","新增警车类型");
                    //重新加载
                    this.getCarTypeListAjax();
                    this.closeTypeCtrl();
                  }else{
                    this.s_alert("新增失败！")
                  }
                })
                .catch((err)=>{
                  //console.log(err);
                })
            }

          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.searchResourceText === "" ){
                this.getCarTypeListAjax();
              }
            }
          },
          //删除功能
          deleteRowFn(){
            //DELETE /base/remove
            if( this.vehicleTypeAddObj.id !== "" ){
              let msg = confirm("是否确定删除该警车类型？");
              if( msg ){
                let params ={
                  "conditions": [
                    {
                      "field": "ID",
                      "symbol": "=",
                      "value": this.vehicleTypeAddObj.id
                    }
                  ],
                  "dataTypeCode": "policefacility",
                  "tableName": "T_CAR_TYPE"
                };

                //console.log(params);
                this.$axios.delete(this.HOST+"/base/remove", {
                  data: params
                })
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("删除成功！");
                      this.s_logwrite("资源信息管理-警车管理","删除警车类型");
                      //重新加载
                      this.getCarTypeListAjax();
                      //清除选择缓存
                      this.clearFn();
                    }else{
                      this.s_alert("删除失败！该类型已经被车辆绑定！");
                    }
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的警车类型！");
            }
          },
          //清除选择
          clearFn(){
            this.vehicleTypeAddObj.id = "";
            this.isActive = "";
            //this.searchResourceText = "";
          },
          close(){
            this.searchResourceText = "";
            this.tableRowParams.conditions = [];
            this.$emit("typeListClose");
            this.clearFn();
          },
          closeTypeCtrl(){
            this.vehicleTypeAddObj.isShow = false;
            this.vehicleTypeAddObj.name = "";
            this.vehicleTypeAddObj.id = "";
            this.isActive = "";
          }
        }
    }
</script>

<style scoped>
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .Btns-ctrl-body .btns{
    position: relative;
  }
  .vehicleType{
    position: absolute;
    z-index: 5;
    width: 200px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 4px;
    right: 0;
    top: 35px;
    box-shadow: 0 0 5px 0 rgba(51,51,51,0.2);
    border: 1px rgba(51,51,51,0.3) solid;
  }
  .vehicleType input{
    width: 100%;
    height: 30px;
    border: 1px rgba(51,51,51,0.2) solid;
    box-sizing: border-box;
    padding-left: 5px;
    margin: 10px 0;
  }
</style>
